<template>
	<div>
		<topbar :title="title"></topbar>
		<section>
			<div class='filmwrap'>
				<div class='tab'>
					<router-link :to="{name:'nowplaying'}" >
						正在热映
					</router-link>
					<router-link :to="{name:'willplaying'}">
						即将上映
					</router-link>
				</div>
				<router-view></router-view>
			</div>
		</section>
	</div>
</template>
<script>
	import $ from 'jquery';
	import bar from './../home/bar.vue';
	export default{
		data:function() {
			return {
				title:'卖座电影',
				filmList:[]
			}
		},
		components:{
			bar:bar,
		}
	}
</script>
<style>
	.filmwrap{
		padding-left: 15px;
	    padding-right: 15px;
	    background-color: #f9f9f9;
	    width: 100%;
	}
	.filmwrap>ul>li{
		width: 100%;
	    padding: 20px 0;
	    border-bottom: dashed 1px #c9c9c9;
	    cursor: pointer;
	}
	.tab{
		height: 46px;
	    margin: 0 auto;
	    border-bottom: solid #fe6e00 1px;
	}
	.tab a{
		float: left;
	    width: 50%;
	    height: 100%;
	    text-align: center;
	    font-size: 16px;
	    line-height: 46px;
	    color: #6a6a6a;
	    cursor: pointer;
	    text-decoration:none;
	    -webkit-tap-highlight-color: rgba(0, 0, 0,0);
	}
	.filmwrap .imgbox{
		width: 60px;
		float:left;
		overflow:hidden;
	    
	}
	.filmwrap .imgbox img{
		width:100%;
		vertical-align: middle;
	}
	.filmwrap .info{
		padding-left: 15px;
	    display: inline-block;
	    width: 75%;
	}
	.filmwrap .fm{
		font-size: 16px;
	    line-height: 32px;
	    color: #000;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.filmwrap .filmname{
		float: left;
    	width: 85%;
    	overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.desc{
		height: 24px;
	    line-height: 24px;
	    color: #8e8e8e;
	    font-size: 12px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 100%;
	    display: inline-block;
	}
	.film-counts{
		line-height: 24px;
	    color: #8e8e8e;
	    font-size: 12px;
	}

	.scroe{
		float: right;
	    font-size: 16px;
	    line-height: 32px;
	    color: #fc7103;
	}
	.gt{
		font-family: monospace;
    	color: #c6c6c6;
	}
	.buy{
		position:absolute;
		right:10%;
	}
</style>